<template>
    <div>
        <el-button type="primary" @click="backlist">返回无限池</el-button>
        <el-form :model="basicInfo" status-icon label-width="130px" class="demo-ruleForm">
            <el-form-item label="盒子名称" prop="pass">
                <el-input type="text" v-model="basicInfo.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="抽奖按钮" prop="checkPass">
                <div>
                    <el-checkbox v-model="checked1" label="抽一发" border></el-checkbox>
                    <el-checkbox v-model="checked2" label="抽三发" border></el-checkbox>
                    <el-checkbox v-model="checked3" label="抽五发" border></el-checkbox>
                    <el-checkbox v-model="checked4" label="抽十发" border></el-checkbox>
                </div>
            </el-form-item>
            <el-form-item label="盲盒单抽价格" prop="checkPass">
                <el-input type="number" v-model="basicInfo.price" placeholder="0.00"></el-input>
            </el-form-item>
            <el-form-item label="玩法选择" prop="age">
                <div>
                    <el-checkbox v-model="checked5" label="Boss赏模式" border></el-checkbox>
                    <el-checkbox v-model="checked6" label="魔王赏模式" border></el-checkbox>
                    <el-checkbox v-model="checked7" label="保底模式" border></el-checkbox>
                    <el-checkbox v-model="checked8" label="双保底模式" border></el-checkbox>
                    <el-checkbox v-model="checked9" label="超级加倍模式" border></el-checkbox>
                    <el-checkbox v-model="checked10" label="闯关模式" border></el-checkbox>
                    <el-checkbox v-model="checked11" label="狂欢模式" border></el-checkbox>
                    <el-checkbox v-model="checked12" label="矿难模式" border></el-checkbox>
                    <el-checkbox v-model="checked13" label="天降幸运模式" border></el-checkbox>
                    <el-checkbox v-model="checked14" label="三连击模式" border></el-checkbox>
                </div>
            </el-form-item>
            <el-form-item label="是否隐藏" prop="age">
                <template>
                    <el-radio v-model="radio" label="1">是</el-radio>
                    <el-radio v-model="radio" label="2">否</el-radio>
                </template>
            </el-form-item>
            <el-form-item label="保底触发cp值" prop="age">
                <el-input v-model="a" placeholder="0.0000000"></el-input>
            </el-form-item>
            <el-form-item  label="双保底触发cp值" prop="age">
                <el-input v-model="a" placeholder="0.0000000"></el-input>
            </el-form-item>
            <el-form-item label="闯关关数" prop="age">
                <el-input v-model="a" placeholder="请输入最大关数"></el-input>
            </el-form-item>
            <el-form-item label="狂欢模式发数限制" prop="age">
                <el-input v-model="a" placeholder="请输入最大发数"></el-input>
            </el-form-item>
            <el-form-item label="Boss赏单轮发数" prop="age">
                <el-input v-model="a" placeholder="请输入单轮发数"></el-input>
            </el-form-item>
            <el-form-item label="霸主模式时间设置" prop="age">
                <el-input v-model="a" placeholder="请输入秒数"></el-input> 秒
            </el-form-item>
            <el-form-item label="盒子排序" prop="age">
                <el-input v-model="a" placeholder="0"></el-input>
            </el-form-item>
            <el-form-item label="玩法说明" prop="age">
                <template>
                    <el-radio v-model="basicInfo.shuoming" label="1">选择规则</el-radio>
                    <el-radio v-model="basicInfo.shuoming" label="2">备选项</el-radio>
                </template>
            </el-form-item>
            <el-form-item label="封面图" prop="age">
                <el-upload action="" list-type="picture-card" :http-request="handlePictureCardPreview"
                    :on-change="uploadImage" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                    <img width="160" v-if="basicInfo.display_url" :src="basicInfo.display_url" alt="">
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submit">提交</el-button>
            </el-form-item>
        </el-form>
        <!-- <p> -->
        <!-- </p> -->
        <!-- 奖品列表 -->
        <!-- </div> -->
    </div>
</template>

<script>
import wuxian from "../../../api/jurisdiction"
export default {
    data() {
        return {
            basicInfo: {},
            // 抽
            a:'',
            checked1: true,
            checked2: false,
            checked3: false,
            checked4: false,
            checked5: false,
            checked6: false,
            checked7: false,
            checked8: false,
            checked9: false,
            checked10: false,
            checked11: false,
            checked12: false,
            checked13: false,
            checked14: false,
            radio: '1',
            boxId: "",
            basicInfo: {}
        }
    },
    mounted() {
        // this.getEditGoodInfo();
         if (this.$route.params.id) {
             this.getEditGoodInfo()
         
        }
    },
    methods: {
        getEditGoodInfo() {
            wuxian.wuxianInfo({uuid:this.$route.params.id}).then((res) => {
                console.log('获取赏品详情', res)
                this.basicInfo = res.data.data
                this.basicInfo.price = this.basicInfo.price / 100
            })
        },
        backlist() {
            this.$router.push("/layout/choushangguanli/wuxianchi")
        },
           uploadImage(upFile) {
            let file = upFile.raw
            let newName = file.name.split('.')
            let num = crypto.randomUUID()
            let path = `houtaiguanli/wuxianchi/${num}.${newName[newName.length - 1]}`
            wuxian.uploadImg({ "path": path }).then((res) => {
                let result = res.data
                const data = new FormData();
                data.append('key', path);
                data.append('Signature', result.authorization);
                data.append('x-cos-security-token', result.token);
                data.append('x-cos-meta-fileid', result.cos_file_id);
                data.append('file', file, path);
                wuxian.generalAPI(result.url, data).then((a) => {
                    wuxian.downloadImg({
                        file_list: [
                            {
                                fileid: res.data.file_id,
                                max_age: 0
                            }
                        ]
                    }).then((res) => {
                        let yunurl = res.data.file_list[0].download_url
                        this.basicInfo.display_url = yunurl
                        this.$message.success("图片上传成功")
                        console.log('url', this.basicInfo.display_url)
                    })
                })
            })
        },
        submit() {
            if (this.basicInfo.display_url) {
                wuxian.postwuxiangame({
                    display_url: this.basicInfo.display_url,
                    name: this.basicInfo.name,
                    ip_family: "其他",
                    price:this.basicInfo.price * 100
                }).then((res) => {
                    this.$router.push("/layout/choushangguanli/wuxianchi")
                    this.$message.success("添加成功!")
                    console.log('添加成功',res)
                }).catch((err) => {
                    console.log(err)
                })
            } else {
                this.$message.warning("图片上传中,请稍等")
            }
        },
        handleRemove() {

        }
        , handlePictureCardPreview() {

        },
        handlePictureCardPreview() {

        }

    }
}
</script>

<style lang="less" scoped>
.el-input {
    width: 200px;
}

.el-checkbox {
    margin-bottom: 10px;
}
</style>